<template>
  <div class="page-background">
    <h1 class="news-title">{{ $t('card8.latestNews') }}</h1>
    <div class="news-display">
      <div class="image-container">
        <transition name="slide-fade" @before-enter="beforeEnter" @enter="enter" @leave="leave">
          <img :key="activeImageKey" :src="activeImage" alt="News Image" class="news-image"/>
        </transition>
        <div class="image-caption">
          <div class="headline-title">{{ $t('card8.headlineTitle') }}</div>
          <h3>{{ activeTitle }}</h3>
          <p>{{ activeDescription }}</p>
        </div>
      </div>
      <div class="title-container">
        <div class="news-item"
             v-for="(news, index) in computedNewsList"
             :key="index"
             @mouseover="setActiveNews(news, index, true)"
             @mouseleave="startAutoSlide"
             :class="{ hover: currentIndex === index }"
        >
          <div class="news-text">
            <p class="date">{{ news.date }}</p>
            <h3>{{ news.title }}</h3>
          </div>
          <div class="news-image">
            <img :src="news.image" alt="News Thumbnail" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeImage: require('@/assets/card8-1.png'),
      activeImageKey: 'card8-1.png',
      activeTitle: '',
      activeDescription: '',
      currentIndex: 0,
      autoSlideInterval: null,
    };
  },
  computed: {
    computedNewsList() {
      return [
        {
          title: this.$t('card8.item1.title'),
          date: this.$t('card8.item1.date'),
          description: this.$t('card8.item1.description'),
          image: require('@/assets/card8-1.png'),
        },
        {
          title: this.$t('card8.item2.title'),
          date: this.$t('card8.item2.date'),
          description: this.$t('card8.item2.description'),
          image: require('@/assets/card8-2.jpg'),
        },
        {
          title: this.$t('card8.item3.title'),
          date: this.$t('card8.item3.date'),
          description: this.$t('card8.item3.description'),
          image: require('@/assets/card8-3.jpg'),
        },
        {
          title: this.$t('card8.item4.title'),
          date: this.$t('card8.item4.date'),
          description: this.$t('card8.item4.description'),
          image: require('@/assets/card8-4.jpg'),
        },
      ];
    },
  },
  methods: {
    setActiveNews(news, index, stopAutoSlide = false) {
      this.activeImageKey = news.image;
      this.activeImage = news.image;
      this.activeTitle = news.title;
      this.activeDescription = news.description;
      this.currentIndex = index;

      if (stopAutoSlide) {
        this.stopAutoSlide();
      }
    },
    startAutoSlide() {
      this.autoSlideInterval = setInterval(() => {
        this.currentIndex = (this.currentIndex + 1) % this.computedNewsList.length;
        this.setActiveNews(this.computedNewsList[this.currentIndex], this.currentIndex);
      }, 3000);
    },
    stopAutoSlide() {
      if (this.autoSlideInterval) {
        clearInterval(this.autoSlideInterval);
        this.autoSlideInterval = null;
      }
    },
    beforeEnter(el) {
      el.style.opacity = 0;
    },
    enter(el, done) {
      el.offsetWidth;
      el.style.transition = 'opacity 0.5s ease';
      el.style.opacity = 1;
      done();
    },
    leave(el, done) {
      el.style.transition = 'opacity 0.5s ease';
      el.style.opacity = 0;
      done();
    },
    initializeFirstNews() {
      if (this.computedNewsList.length > 0) {
        this.setActiveNews(this.computedNewsList[0], 0);
      }
    },
  },
  mounted() {
    this.initializeFirstNews();
    this.startAutoSlide();
  },
  beforeUnmount() {
    this.stopAutoSlide();
  },
};
</script>

<style scoped>
.page-background {
  background: url('@/assets/background8.png') no-repeat center center fixed;
  background-size: cover;
  min-height: 100vh; /* 确保覆盖整个视口高度 */
  padding: 20px; /* 根据需要添加填充 */
}

.news-title {
  font-size: 3vw;
  text-align: center;
  font-family: "STSong", "华文中宋", serif;
  margin-bottom: 20px;
  color: #0C2785;
  font-weight: 1000;
}

.headline-title {
  background-color: #800080;
  color: white;
  margin-left: 3%;
  text-align: left;
  padding: 3px 6px;
  font-size: 0.8vw;
  font-weight: bold;
  position: relative;
  display: inline-block;
  margin-bottom: 2%;
}

.news-display {
  display: flex;
  margin-left: 2%;
  margin-right: 2%;
  width: 97%;
  position: relative; /* 确保子元素相对于此容器定位 */
  overflow: hidden; /* 隐藏任何溢出的内容 */
}

.image-container {
  flex: 0 0 65%;
  background-color: #b0daff;
  position: relative;
  overflow: hidden; /* 确保图像不溢出此容器 */
}

.image-caption {
  position: absolute;
  bottom: 10px;
  left: 10px;
  padding: 10px;
  border-radius: 5px;
  color: #ffffff;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
}

.image-caption h3 {
  font-size: 1.2vw;
  margin-bottom: 2%;
  font-weight: 1000;
  margin-left: 3%;
}

.image-caption p {
  font-size: 0.9vw;
  margin-bottom: 2%;
  margin-left: 3%;
  margin-right: 3%;
}

.title-container {
  flex: 0 0 35%;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
}

.news-item {
  display: flex;
  margin-bottom: 0;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #ddd;
  padding: 10px;
}

.news-item.hover {
  background-color: #ffbd74;
  width: 100%;
  color: white;
  transform: translateX(-2%);
}

.news-item.hover .news-text p.date,
.news-item.hover .news-text h3,
.news-item.hover .news-text p {
  color: white;
}

.news-text {
  flex: 0 0 55%;
  text-align: left;
}

.news-text p.date {
  font-size: 0.8vw;
  margin-bottom: 5px;
  color: #636363;
}

.news-text h3 {
  font-size: 1.2vw;
  margin: 0;
  font-weight: 1000;
  color: #4e4e4e;
  margin-left: 7%;
  margin-right: 7%;
}

.news-text p {
  font-size: 0.9vw;
  margin: 0;
  margin-left: 7%;
  margin-right: 7%;
}

.news-image {
  flex: 0 0 45%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.news-image img {
  max-width: 100%;
  height: auto;
}

.news-item.hover .news-image img {
  opacity: 0.8;
}
</style>
